import React, { useEffect, useState } from 'react'
import Item from './Item'
import Pubsub from 'pubsub-js'
export default function List() {
  //搜索优化
  //在没有请求数据的时候,显示请搜索
  //请求过程中,显示正在搜索中

  //初始化一个state,请求回来数据之后setstate,
  //在还没有开始搜索的时候
  const [searchList, setSearchList] = useState({ isInit: true, isSearch: false, data: [] })
  //订阅
  //拿到数据后去遍历
  useEffect(() => {
    Pubsub.subscribe('github', (_, data) => {
      console.log(data);
      setSearchList(data)
    })
  }, [])

  console.log(searchList.data,'searchList.data');

  return (
    <div className="row">
      {/* 数组遍历生成Item */}
      {

        //列表渲染
        //条件渲染需要判断再去渲染
        // searchList.map(item=>{
        //   return <Item key = {item.id} {...item}/>
        // })

        //isInit 为true,输出开始搜索,如果isInit为false,进入第一个:后面的数据,判断isSearch是true输出正在搜索中,isSearch是false 开始遍历
        //一开始,isInit是true,执行开始搜索
        //在点击搜索后,先传一个Pubsub,isInit变为false,isSearch为true,执行正在搜索
        //搜索完毕后isInit变为false,isSearch变为false,遍历生成列表
        searchList.isInit ? <h1>请开始搜索</h1> :
          searchList.isSearch ? <h1>正在搜索中</h1> :
            searchList.data.map(item => {
              return <Item key={item.id} {...item} />
            })
      }
    </div>
  )
}
